<template>
	<div id="leftnav">
		<ul>
			<li class="selected"><b>N</b><span>消息</span>ews</li>
			<li><b>N</b><span>公告</span>otice</li>
			<li><b>M</b><span>我的提醒</span>y reminder</li>
		</ul>
	</div>
</template>
<script>
	export default {
        name: "leftnav"
	}
</script>
<style scoped lang="less" rel="stylesheet/less" type="text/css">
	@import '../../../../public/css/variable.less';	
	li{
        margin-bottom: 12px;
        width: 250px;
        position: relative;
        display: block;
        padding: 25px 0 25px 85px;
        box-sizing: border-box;
        color: #8f9397;
        .fonts(15px);
        border: 1px solid #eee;
        background: #f4f4f4;
        span{
            display: block;
            .fonts(18px);
            padding-bottom: 8px;
			line-height: 12px;
        }
        b{
            float: left;
            .fonts(50px);
            font-weight: normal;
            display: inline-block;
            margin-top: -10px;
        }
        
        &:hover,&.selected{
            background: @cgolden;
            border-color: @cgolden;
            color: @cw;
            &:after{
                content: "";
                position: absolute;
                right: -20px;
                top: 50%;
                margin-top: -10px;
                .triangle(right,@w:10px,@c:@cgolden)
            }
            
        }
    }
</style>